<template>
  <div>
    <el-dialog title="注册用户" :visible.sync="visible">
      <el-form
        :model="regesiterForm"
        ref="regesiterForm"
        :rules="regesiterRules"
      >
        <el-form-item
          label="账号"
          :label-width="formLabelWidth"
          prop="account"
          class="form-item-flex"
        >
          <el-input
            v-model="regesiterForm.account"
            placeholder="请输入账号"
            readonly
            onfocus="this.removeAttribute('readonly');"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input
            v-model="regesiterForm.name"
            placeholder="请输入姓名"
            readonly
            onfocus="this.removeAttribute('readonly');"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          :label-width="formLabelWidth"
          prop="password1"
        >
          <el-input
            v-model="regesiterForm.password1"
            placeholder="请输入密码"
            :key="passwordType"
            :type="passwordType"
            readonly
            onfocus="this.removeAttribute('readonly');"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="确认密码"
          :label-width="formLabelWidth"
          prop="password2"
        >
          <el-input
            v-model="regesiterForm.password2"
            placeholder="请再输入一遍密码"
            :key="passwordType"
            ref="password"
            :type="passwordType"
          ></el-input>
          <span class="show-pwd" @click="showPwd">
            <svg-icon
              :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
            />
          </span>
        </el-form-item>
        <el-form-item
          label="用户类型"
          :label-width="formLabelWidth"
          prop="type"
        >
          <el-select
            v-model="regesiterForm.type"
            placeholder="请选择用户类型"
            @change="changeHandler"
          >
            <el-option
              v-if="role"
              v-for="item in type"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
            <el-option
              v-if="!role"
              v-for="item in type2"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="学习类型"
          :label-width="formLabelWidth"
          prop="license"
          v-if="regesiterForm.type == 2"
        >
          <el-select
            v-model="regesiterForm.license"
            placeholder="请选择学习类型"
            @change="changeHandler"
          >
            <el-option
              v-for="item in licenseType"
              :key="item.id"
              :label="item.type"
              :value="item.type"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="补差课程" prop="subject" v-if="showSubject">
          <el-select
            v-model="regesiterForm.subject"
            placeholder="请选择补差课程"
            multiple
          >
            <el-option
              v-for="item in subjects"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetHandler('regesiterForm')">重 置</el-button>
        <el-button type="primary" @click="submit('regesiterForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { regesiter } from "@/api/user";
import store from "@/store";
import subjectApi from "@/api/subject/index";

export default {
  data() {
    const validateName = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入姓名"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (this.regesiterForm.password2 == "") {
        callback(new Error("密码必须填写！"));
      } else if (this.regesiterForm.password1 != this.regesiterForm.password2) {
        callback(new Error("两次输入的密码不对！"));
      } else if (this.regesiterForm.password1.length < 6) {
        callback(new Error("密码位数不得小于6！"));
      } else {
        callback();
      }
    };
    const validateAccount = (rule, value, callback) => {
      if (/^\d+$/.test(value)) {
        callback();
      } else {
        callback(new Error("账号必须是纯数字！"));
      }
    };
    const validateLicense = (rule, value, callback) => {
      if (!value) {
        callback(new Error("用户类型不得为空！"));
      } else {
        callback();
      }
    };
    return {
      type: [
        { id: 0, type: "admin", name: "管理员" },
        { id: 1, type: "teacher", name: "教师" },
        { id: 2, type: "student", name: "学员" },
      ],
      type2: [
        { id: 1, type: "teacher", name: "教师" },
        { id: 2, type: "student", name: "学员" },
      ],
      licenseType: [
        { id: 0, type: "PA" },
        { id: 1, type: "TA" },
        { id: 2, type: "补差" },
        { id: 3, type: "其他" },
      ],
      regesiterForm: {
        account: "",
        name: "",
        password1: "",
        password2: "",
        type: "",
        license: "",
        subject: [],
      },
      regesiterRules: {
        name: [{ required: true, trigger: "blur", validator: validateName }],
        password1: [
          { required: true, message: "密码必须填写！", trigger: "blur" },
        ],
        password2: [
          { required: true, trigger: "blur", validator: validatePassword },
        ],
        account: [
          {
            required: true,
            trigger: "blur",
            validator: validateAccount,
          },
        ],
        type: [
          { required: true, trigger: "change", message: "用户类型必须选择！" },
        ],
        license: [
          {
            trigger: "change",
            validator: validateLicense,
          },
        ],
        subject: [
          {
            required: true,
            message: "补差课程不得为空！",
            trigger: "blur",
          },
        ],
      },
      formLabelWidth: "80px",
      passwordType: "password",
      showSubject: false,
      subjects: [],
    };
  },
  props: {
    dialogTableVisible: false,
  },
  computed: {
    role: () => store.getters.roles.includes("admin"),
    visible: {
      get() {
        return this.dialogTableVisible;
      },
      set(value) {
        this.regesiterForm = {
          account: "",
          name: "",
          password1: "",
          password2: "",
          type: "",
          license: "",
          subject: [],
        };
        this.$emit("update:dialogTableVisible", {
          type: "regesiter",
          val: value,
        });
      },
    },
  },
  methods: {
    changeHandler() {
      if (this.regesiterForm.type == 2) {
        if (this.regesiterForm.license == "补差") {
          //如果是补差学员，要选择其补差的课程
          subjectApi.getAll().then((res) => {
            this.subjects = res.data;
            this.showSubject = true;
          });
        } else {
          this.regesiterForm.subject = null;
          this.showSubject = false;
        }
      } else {
        this.regesiterForm.subject = null;
        this.showSubject = false;
      }
    },
    resetHandler(regesiterForm) {
      this.$refs[regesiterForm].resetFields();
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    submit(regesiterForm) {
      this.$refs[regesiterForm].validate((valid) => {
        if (valid) {
          const { name, account, password1, type, license, subject } =
            this.regesiterForm;
          const data = {
            name,
            account,
            password: password1,
            status: type,
            license,
            subject,
          };
          regesiter(data).then((res) => {
            this.$message({
              message: "注册成功",
              type: "success",
            });
            this.regesiterForm = {
              account: "",
              name: "",
              password1: "",
              password2: "",
              type: "",
              license: "",
              subject: [],
            };
            this.subjects = [];
            this.showSubject = false;
            this.$emit("update:dialogTableVisible", {
              type: "regesiter",
              val: !this.dialogTableVisible,
            });
          });
        } else {
          console.log("error submit!!");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.show-pwd {
  position: absolute;
  right: 10px;
  top: 7px;
  font-size: 16px;
  color: $dark_gray;
  cursor: pointer;
  user-select: none;
}
</style>
